import { Divider, Radio, Space, Table, Button, Switch, Col, Form, Input, Row, Select, theme, DatePicker, Pagination, Modal, message, Upload } from 'antd';
import './index.scss'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { comm } from '../../../utils/sendRequst';
import { useEffect, useState } from 'react';

const Student = () => {
    // rowSelection object indicates the need for row selection
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [dataList, SetDataList] = useState([]);
    const [dataList1, SetDataList1] = useState([]);
    const columns = [
        {
            title: '商品分类',
            dataIndex: 'classifyName',
        },
        {
            title: '销量（件）',
            dataIndex: 'chinese',
            sorter: {
                compare: (a, b) => a.chinese - b.chinese,
                multiple: 3,
            },
        },
        {
            title: '占比',
            dataIndex: 'math',
            sorter: {
                compare: (a, b) => a.math - b.math,
                multiple: 2,
            },
        },
        {
            title: '销售额（元）',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
        {
            title: '占比',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
    ];
    const columns1 = [
        {
            title: 'Name',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
        },
    ];
    // const data = [
    //     {
    //         key: '1',
    //         // name: 'John Brown',
    //         chinese: 98,
    //         math: 60,
    //         english: 70,
    //     },
    //     {
    //         key: '2',
    //         // name: 'Jim Green',
    //         chinese: 98,
    //         math: 66,
    //         english: 89,
    //     },
    //     {
    //         key: '3',
    //         // name: 'Joe Black',
    //         chinese: 98,
    //         math: 90,
    //         english: 70,
    //     },
    //     {
    //         key: '4',
    //         // name: 'Jim Red',
    //         chinese: 88,
    //         math: 99,
    //         english: 89,
    //     },
    // ];
    const onChange = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };

    // 渲染页面全部数据
    const getall = () => {
        comm().then(res => {
            // console.log(res);

            console.log(res.data, "res");
            const list = res.data.map(item => ({ ...item, key: item.classifyID }))
            console.log(list, 'list');
            SetDataList(list)
        })

    };

    // 自动调用渲染页面数据请求
    useEffect(() => {
        getall()
    }, [])
    const [selectionType, setSelectionType] = useState('checkbox');
    return (
        <div>
            <div>
                <Table columns={columns} dataSource={dataList} onChange={onChange} />;
            </div>
            {/* <div>
                <Radio.Group
                    onChange={({ target: { value } }) => {
                        setSelectionType(value);
                    }}
                    value={selectionType}
                >
                    <Radio value="checkbox">Checkbox</Radio>
                    <Radio value="radio">radio</Radio>
                </Radio.Group>

                <Divider />

                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={data}
                />
            </div> */}
        </div>

    );
}

export default Student;